
let { form, layer, $ } = layui;


export default class Login {
    constructor() {
        this.render();
        this.handle();
    }
    render() {
        let str =
            `<!DOCTYPE html>
            <html lang="en">
            
            <head>
                <style>
                    span {
                        font-size: 12px;
                        color: red;
                    }
            
                    body {
                        background-color: #ccc;
                    }
            
                    .layui-card {
                        width: 500px;
                        height: 250px;
                        margin: auto;
                        margin-top: 100px;
                    }
                </style>
            </head>
            
            <body>
                <!-- 卡片 -->
                <div class="layui-card">
                    <div class="layui-card-header">管理员登录页面</div>
                    <div class="layui-card-body">
                        <!-- from表单 -->
                        <form class="layui-form" action="">
                            <!-- 账户框 -->
                            <div class="layui-form-item">
                                <label class="layui-form-label">用户名</label>
                                <div class="layui-input-block">
                                    <input type="text" name="username" required lay-verify="" placeholder="请输入用户名"
                                        autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <!-- 密码框 -->
                            <div class="layui-form-item">
                                <label class="layui-form-label">密码框</label>
                                <div class="layui-input-block">
                                    <input type="password" name="pwd" required lay-verify="" placeholder="请输入密码"
                                        autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <!-- 按钮 -->
                            <div class="layui-form-item">
                                <div class="layui-input-block">
                                    <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </body>
            
            </html>`;

        $("#root").html(str);

    };

    handle() {
        form.on('submit(formDemo)', function (data) {
            $.ajax({
                type: "post",
                url: "/users/login",
                data: data.field,
                success: function (res) {
                    console.log(res);
                    if (res.state == 1) {
                        localStorage.token = res.token;
                        layer.alert("登录成功", function (index) {
                            layer.close(index);
                            location.href = "#index"
                        })
                    } else if (res.state == 3) {
                        layer.alert(`${res.str}`)
                    } else {
                        layer.alert(`${res.str}`)
                    }
                }
            });
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });
        form.render();
    }
}